<template>
    <section class="section_inform">
        <div class="inform_w">
            <div class="inform_left fl">
                <div class="inform_l_top">
                    竞拍咨询
                </div>
                <div class="inform_l_bottom">
                    <div class="news_u fl" v-for="(item,index) in tableData" :key="index">
                        <p class="title">{{item.newsTitle}}</p>
                        <div class="main">
                            <img :src="item.newsImg" alt="">
                            <div class="text">
                                <a>{{item.newsContent}}</a>
                                <p>
                                    <span>发布机构:{{item.adminName}}</span>
                                    <span>发布时间:{{item.newsTime}}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="inform_right fl">
                <div class="news">
                    <p class="news_p" @click="sortTable()">点击查看最新消息</p>
                    <ul>
                        <li v-for="(item,index) in sortData" :key="index" class="li">{{item.newsTitle}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import axios from 'axios'
export default {
    name:'Inform',
    data() {
        return {
            tableData: [],
            sortData:[],
            timer:null
        }
    },
    beforeDestroy() {
        clearTimeout(this.timer)
    },
    mounted() {
       this.getAllNews()
    //    this.sortTable()
    },
    methods: {
        // 待修改
        sortTable(){
            console.log("sort1",this.tableData,this.sortData)
            this.timer = setTimeout(()=>{
                // this.sortData = this.tableData//浅克隆了
                this.sortData = this.tableData.slice(0)//深克隆一下
                this.sortData.sort(function(x,y) {//大-小，降序排列，对于最新时间是升序
                    return  new Date(Date.parse(y.newsTime)).getTime() - new Date(Date.parse(x.newsTime)).getTime();
                    // return y.newsTime-x.newsTime;
                    //return y.newsId-x.newsId
                });
                console.log("sort",this.tableData,this.sortData)
            },100)
        },
        // 获取所有用户留言
        getAllNews(){
            axios.get("http://localhost:8080/api/getAllNewsList/getAllNews",{
              params:{
                id:1
              }
            }).then(
              res=>{
                // this.tableData = res.data
                for(var i= 0;i<res.data.length;i++){
                    var tem = Number(String(res.data[i].newsTime).slice(11,13))+8
                    var d = tem%24 > 10? tem%24 :'0'+tem%24
                    res.data[i].newsTime = String(res.data[i].newsTime).slice(0,10)+ ' ' +d + String(res.data[i].newsTime).slice(13,19)
                    // state.usersubgoods.push(value [i])
                    this.tableData = res.data
                }
                console.log("999",res)
                console.log(this.tableData)

              },
              error=>{
                console.log("88",error.message)
              }
            )
        },
    },
}
</script>

<style scoped>
.inform_w{
    width: 1350px;
    height: 100%;
    margin: 0 auto;
}
.section_inform{
    width: 100%;
    height: 800px;
    margin-top: 50px;
}
.inform_w{
    background-color: #fff;
}
.section_inform .inform_left{
    width: 80%;
    height: 100%;
    padding: 40px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: hidden;
}
.section_inform .inform_left .inform_l_top{
    width: 100%;
    height: 10%;
    border-bottom: 4px solid skyblue;
    padding-left: 30px;
    font-size: 30px;
    line-height: 68px;
    font-family: "楷体";
    font-weight: bold;
}
.inform_l_bottom{
    width: 100%;
    height: 90%;
    padding: 20px;
    /* background-color: red; */
    overflow: scroll;
    overflow-x: hidden;
    /* overflow-y: hidden; */
}
.news_u{
    width: 50%;
    height: 250px;
    padding: 4px;
}
.news_u .title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-family: "楷体";
    font-size: 22px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: skyblue;
}
.news_u .main{
    width: 100%;
    height: 190px;
}
.news_u .main img{
    width: 190px;
    height: 100%;
    float: left;
}
.news_u .main .text{
    width: 266px;
    height: 100%;
    float: left;
}
.news_u .main .text a{
    width: 100%;
    height: 70%;
    padding: 5px;
    font-size: 14px;
    color: #000;
    float: left;
    border-bottom: 1px solid #e3e3e3;
}
.news_u .main .text p{
    width: 100%;
    height: 30%;
    float: left;
    font-size: 14px;
    color: #b9b9ba;
}
.news_u .main .text p span{
    width: 100%;
    height: 50%;
    padding-left: 10px;
    display: block;
}
.news_u:hover{
    border: 2px solid red;
}
.section_inform .inform_right{
    width: 20%;
    height: 300px;
    margin-top: 50px;
    padding: 20px;
}
.section_inform .inform_right .news{
    width: 100%;
    height: 100%;
    background-color: #efeff4;
}
.section_inform .inform_right .news p{
    width: 100%;
    height: 20%;
    padding-left: 20px;
    font-size: 20px;
    line-height: 52px;
    background-color: rgba(0, 174, 255, 0.5);
    cursor: pointer;
}
.section_inform .inform_right .news ul{
    width: 100%;
    height: 80%;
    overflow: scroll;
    overflow-x: hidden;
    /* overflow-y: hidden; */
}
.li{
    width: 100%;
    height:30px;
    padding-left: 10px;
    float: right;
    line-height: 30px;
    font-family: "楷体";
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.li:hover{
    opacity: .8;
}
.li:first-child{
    background-color: rgb(245, 35, 35);
}
.li:first-child::before{
    background: skyblue;
}
.li::before{
    content: "";
    background: red;
    width: 5px;
    height: 5px;
    overflow: hidden;
    display: inline-block;
    margin: 10px 11px 0 0;
    border-radius: 50%;
}
</style>